<template>
  <!-- 文件上传部分 -->
  <el-upload
    ref="upload"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :limit="1"
    :on-exceed="handleExceed"
    :auto-upload="false"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <template #trigger>
      <el-button type="primary">Select File</el-button>
    </template>
    <el-button class="ml-3" type="success" @click="submitUpload">
      Upload to Server
    </el-button>
    <template #tip>
      <div class="el-upload__tip text-red">
        Limit 1 file, new file will cover the old file
      </div>
    </template>
  </el-upload>

  <!-- 选择拓扑图展示部分 -->
  <el-select v-model="value" placeholder="Select Topology" style="width: 240px; margin-top: 20px;" @change="handleSelectChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>

  <!-- 条件渲染拓扑图 -->
  <div v-if="selectedTopology" style="margin-top: 20px;">
    <!-- 动态加载 Vue 页面 -->
    <component :is="selectedTopology" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const upload = ref<UploadInstance>()
const value = ref('')
const selectedTopology =ref<null | object>(null) // 用于存储当前选择的拓扑图路径

// 选项数据
const options = [
  { value: 'Option1', label: 'Option1' },
  { value: 'Option2', label: 'Option2', disabled: true },
  { value: 'Option3', label: 'Option3' },
]

// 拓扑图路径与选项的映射
import PredictIndex from '@/views/Model/components/TopologyGraph1.vue';
import DetectIndex from '@/views//Model/components/TopologyGraph2.vue';

const topologyMap: Record<string, any> = {
  Option1: PredictIndex,
  Option3: DetectIndex,
};
// 处理文件超出限制
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

// 文件上传成功回调
const handleSuccess = () => {
  console.log("Upload successful")
}

// 文件上传失败回调
const handleError = () => {
  console.log("Upload failed")
}

// 提交上传
const submitUpload = () => {
  upload.value!.submit()
}

// 选择器值改变时更新拓扑图
const handleSelectChange = (selectedValue: string) => {
  selectedTopology.value = topologyMap[selectedValue] || null
}
</script>
